<template>
	<view class="top——Box">

		<!-- 顶部导航栏 -->
		<view class="top-navbar">
			<view class="wrap_item">
				<view class="wrap">
					<view class="links os-links">
						<text class="link" @click="toUrl('/pages/index')">商城首页</text>
						<text>欢迎来到翼宝商城</text>
						<!-- <a href='https://www.ynxkplay.com' target="_blank">返回首页</a> -->
						<text v-if='!userInfo.username' @click="showAnnouncement('login')">请登录</text>
						<text v-if='!userInfo.username' @click="showAnnouncement('register')">立即注册</text>
						<!-- <text @click='hiddenQrcode = false'>手机App</text> -->
						<text @click="toUrl('/pages/user/index')">个人中心</text>

					</view>

					<view class="links user-links">
						<view class="links user-links">
							<block>
								<view v-if='userInfo.username' class='display' @click="toUrl('/pages/user/index')">
									<view class="userHead">
										<image :src='userInfo.headImgUrl' v-if="userInfo.headImgUrl"></image>
										<image src="/static/image/miss-boy.png"
											v-if="!userInfo.headImgUrl && userInfo.gender == 0"></image>
										<image src="/static/image/miss-girl.png"
											v-if="!userInfo.headImgUrl && userInfo.gender == 1"></image>
									</view>
									<a>{{userInfo.nickName}}</a>
									<a @click='loginout'>退出登录</a>
								</view>


							</block>
						</view>
						<view class="link" @click="showAnnouncement('register')">我的订单</view>
						<!-- 购物车 -->
						<mini-cart></mini-cart>
					</view>
				</view>
			</view>
		</view>
		<!-- 头部主体 -->
		<u-sticky h5-nav-height='0'>
			<view class="header-main">
				<view class="container">
					<view class="header-left">
						<image @load="titLoad" src="/static/image/bannerImg.png" mode="heightFix"></image>
					</view>
					<!-- 搜索区域 -->
					<view class="header-search">
						<!-- 搜索框 -->
						<view class="search-box">
							<view class="input-container">
								<!-- 输入框 -->
								<input class="search-input" style="background: #fff;" placeholder="搜索商品"
									@confirm="goSearch(false)" v-model="keyword" @input='findHotGoodsList' />
								<view class="search-btn" @click="goSearch(false)">
									<text>搜索</text>
								</view>
							</view>
						</view>
						<view class="search-tip">
							<text class="text" @click="goSearch(item)" v-for="(item,index) in hotList"
								:key="index">{{item}}</text>
						</view>
						<!-- 下拉提示列表 -->
						<!-- <view class="keyword-list" v-if="searchFocus && promptKeywords.length > 0"> -->
						<view class="keyword-list" v-if=" promptKeywords.length > 0">
							<block v-for="(item, index) in promptKeywords" :key="index" v-if="index < 10">
								<view :class="['item elip', {'active': keywordIndex == index}]" @click="goSearch(item)">
									{{item}}
								</view>
							</block>
						</view>
					</view>
					<view class="tip_Box">
						<image src="../../static/image/home/1.png" mode="widthFix"></image>
						<image src="../../static/image/home/2.png" mode="widthFix"></image>
						<image src="../../static/image/home/3.png" mode="widthFix"></image>
					</view>
				</view>
			
			</view>
		</u-sticky>
		
		<zw-dialog :hidden="hiddenQrcode" :title="'App下载'" :width="370" :height="400" @close="cancelPayment">
			<view class="qrcode-wrapper">
				<view class="qrcode-wrap">
					<image class="qrcode" src="../../static/image/common/qrcode.png" mode="aspectFit"></image>

				</view>
				<view class="tips">
					<view>手机扫一扫</view>
					<view>下载App</view>
				</view>
			</view>
		</zw-dialog>


	</view>
</template>

<script>
	import logo from '@/components/common/logo.vue';
	import userNavs from '@/components/user/common/top-navs.vue';
	import miniCart from '@/components/cart/mini-cart.vue';
	import licenses from '@/components/user/common/licenses.vue';
	import headerConfig from '@/common/config/common/header.config.js';
	import getTime from '@/getTime.js'
	import {
		getAccToken,
		removeAccToken,
		removeRefToken
	} from '@/userToken.js'
	import {
		mapGetters
	} from 'vuex';
	import {
		encrypt,
		decrypt
	} from '@/utils/jsencrypt';
	export default {
		components: {
			logo,
			userNavs,
			miniCart,
			licenses
		},
		props: {
			searchKeyword: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				hiddenQrcode: true,
				showGoodsList: false,
				searchFocus: false,
				hotGoodsList: [],
				promptKeywords: [],
				keyword: this.searchKeyword,
				keywordIndex: -1,
				userInfo: uni.getStorageSync('userInfo'),
				banners: '',
				showNum: 0,
				logoTit: uni.getStorageSync('logoTit'),
				hotList: ['体重管理计划', '零食大礼包', '蓝牙耳机'],
				titWidth: uni.getStorageSync('titWidth'),
				timer: null, //输入框防抖
			}
		},
		watch: {

		},
		onLoad() {

		},
		activated() {
			this.keyword = this.searchKeyword;
		},
		mounted() {
			// this.getSearchHot()
		},
		onUnload() {
			clearTimeout(this.timer);
		},
		onHide() {
			clearTimeout(this.timer);
		},
		created() {

			window.addEventListener('setItemUser', () => {
				var data = JSON.parse(sessionStorage.getItem('userInfoUpd'))
				if (data && data.headImg && data.headImg != this.userInfo.headImg) {
					this.userInfo.headImg = data.headImg;
				}
				if (data && data.nickName && data.nickName != this.userInfo.nickName) {
					this.userInfo.nickName = data.nickName;
				}

			})
		},
		methods: {
			//热搜词
			getSearchHot() {
				uni.request({
					url: this.totalUrl + '/api/wx/dict/hot_search_term',
					method: 'GET',
					success: (res) => {
						if (res.data.code == 0 || res.data.code == 200) {
							this.hotList = res.data.data
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})
			},


			titLoad(e) {
				var that = this
				if (!that.titWidth) {
					let info = uni.createSelectorQuery().in(this).select(".header-left");
					info.boundingClientRect(function(data) {
						var width = data.width
						uni.setStorageSync('titWidth', width)
					}).exec(function(res) {

					})
				}

			},

			cancelPayment() {
				this.hiddenQrcode = true
			},
			loginout() {
				uni.removeStorageSync('userInfo')
				this.resetSetItem('sellerCartNum', 0);
				this.resetSetItem('resetSetItemUser', '');
				removeAccToken()
				removeRefToken()
				// uni.redirectTo({
				// 	url: '/pages/user/login/index'
				// })
			},
			toUrl(url) {
				uni.navigateTo({
					url: url,
				});
			},



			//输入框输入
			findHotGoodsList() {
				var that = this;
				that.promptKeywords = [];
				clearTimeout(that.timer);
				that.timer = setTimeout(() => {
					if (!that.keyword) {
						return
					}
					var params = {
						pageSize: 15,
						pageNum: 1
					}
					if (that.keyword) {
						params.name = that.keyword
					}
					uni.request({
						url: that.serverUrl + '/goods/list',
						data: params,
						method: 'GET',
						header: {
							'webuuid': encrypt(this.pageTenantId)
						},
						success: (res) => {
							if (res.data.code == 0 || res.data.code == 200) {
								var data = res.data.rows
								for (var i = 0; i < data.length; i++) {
									that.promptKeywords.push(data[i].name);

								}
							} else {

								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								})
							}
						}
					})
				}, 300);

			},
			showAnnouncement(page) {
				uni.navigateTo({
					url: '/pages/order/index',
				});
			},


			chooseKeyword(direction = 'up') {
				if (direction == 'up') {
					if (this.keywordIndex <= 0) {
						this.keywordIndex = this.promptKeywords.length - 1;
					} else {
						this.keywordIndex--;
					}
				} else {
					if (this.keywordIndex >= this.promptKeywords.length - 1) {
						this.keywordIndex = 0;
					} else {
						this.keywordIndex++;
					}
				}
			},
			onSearchBlur() {
				setTimeout(() => {
					this.searchFocus = false;
				}, 200);
			},
			goSearch(keyword) {
				if (keyword) this.keyword = keyword;
				if (!this.keyword) return;
				uni.navigateTo({
					url: `/pages/search/index?keyword=${this.keyword}`
				});
			}
		}
	}
</script>

<style lang="scss">
	.closeImg {
		position: absolute;
		right: 20px;
		top: 20px;
		z-index: 99;

		image {
			width: 18px;
			height: 18px;
			cursor: pointer;
		}
	}

	.adTop {
		width: 100%;
		transition: height 0.8s;
		overflow: hidden;
		position: relative;

		.adImg {
			vertical-align: bottom;
			display: block;
			margin-bottom: -1px;
			width: 100%;
		}

	}

	.os-links {
		color: #000;
		font-size: 14px;

		text {
			margin: 0 20px;
			color: #000;
			line-height: 40px;
			cursor: pointer;

			&:hover {
				color: $color-primary;
			}
		}

		a {
			text-decoration: none;
			color: #000;
			margin: 0 20px;
		}

		a:hover,
		a:visited,
		a:link,
		a:active {
			color: $color-primary;
			// 设置使所有a标签的四种状态都和本身颜色保持一致，样式代码自己写
		}

		a {
			cursor: pointer;
		}

		a:hover {
			color: $color-primary;
		}
	}

	.userBox {
		margin-left: 15px;
	}

	.display {
		@extend %flex-align-center;
		color: #000;

		text {
			color: #000;
			cursor: pointer;
		}

		a {
			margin: 0 10px;
			cursor: pointer;
		}

		a:hover {
			color: $color-primary;
		}

		text:hover {
			color: $color-primary;
		}

		.userHead {
			@extend %flex-align-center;

			image {
				height: 25px;
				width: 25px;
				border-radius: 50%;
				margin-right: 5px;
			}
		}
	}

	.qrcode-wrapper {
		width: 100%;

		.qrcode-wrap {
			width: 290px;
			height: 290px;
			position: relative;
			margin: 30px auto 10px;

			.qrcode {
				width: 100%;
				height: 100%;
			}

			.logo-wrap {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 45px;
				height: 45px;
				background-color: $bg-color;
				padding: 3px;
				border-radius: 10px;
				box-shadow: 0 0 5px $bg-color;

				.logo {
					width: 100%;
					height: 100%;
				}
			}
		}

		.tips {
			margin-bottom: 10px;
			color: $text-color;
			text-align: center;

			.platform {
				color: $color-primary;
				margin: 0 5px;
			}
		}
	}

	.maxH {
		height: 598px;
	}

	.minH {
		height: 40px;
	}

	.top-navbar {
		width: 100%;
		position: relative;
		transition: height 0.5s;
		font-size: 12px;

		.wrap_item {
			background-color: #fff;
		}

		.wrap {
			max-width: $page-width;
			min-width: $page-minwidth;
			margin: 0 8vw;
			@extend %flex-align-center;
			justify-content: space-between;

			.links {
				height: 40px;
				line-height: 40px;
				@extend %flex-align-center;

				.link {
					color: #000;
					line-height: 40px;
					margin: 0 20px 0 0 !important;
					cursor: pointer;

					&:hover {
						color: $color-primary;
					}
				}

				.linka {
					color: #000;
					line-height: 40px;

					&:hover {
						color: $color-primary;
					}
				}

				.separator {
					margin: 0 .4rem;
					color: #424242;
					line-height: 40px;
				}
			}
		}
	}

	.header-main {
		position: relative;
		height: 100px;
		width: calc(100vw - 15px);
		background: #fff !important;
		.container {
			max-width: $page-width;
			min-width: $page-minwidth;
			margin: 0 8vw;
			@extend %flex-align-center;
			justify-content: space-between;
			height: 100px;

			.header-left {
				@extend %flex-align-center;
				justify-content: space-between;

				image {
					height: 80px;
					margin-left: 10px;
				}

				.all-link {
					color: #333333;
					font-size: 16px;
					cursor: pointer;
					margin-right: 10px;

					&:hover {
						color: $color-primary;
					}
				}
			}

			.header-brands {
				height: 100px;
				padding-left: 10px;
				@extend %flex-align-center;

				.all-link {
					color: #333333;
					font-size: 20px;
					cursor: pointer;
					font-weight: bold;
					margin-right: 20px;

					&:hover {
						color: $color-primary;
					}
				}

				.nav-item {
					margin: 0 15px;
					cursor: pointer;
					height: 100px;
					line-height: 100px;

					&:hover {
						color: $color-primary;
					}
				}
			}

			.tip_Box {
				@extend %flex-align-center;
				image {
					width: 70px;
					margin-left: 10px;
				}
			}

			.header-search {
				position: relative;
				width: calc(100% - 700px);
				height: 65px;

				.search-tip {
					padding-top: 12px;
					font-size: 13px;
					color: #777;
					letter-spacing: 1px;

					.text {
						padding: 0 10px;
						border-right: 1px solid #777;
						cursor: pointer
					}

					text:hover {
						color: $color-primary
					}

					.text:last-child {
						border: none;
					}
				}

				.search-box {
					@extend %flex-align-center;
					width: 100%;
					height: 40px;
					border-radius: 2px;
					cursor: pointer;

					&.active {
						border: 1px solid $color-primary;
					}

					.input-container {
						width: 100%;
						position: relative;
						border: 2px solid $color-primary;
						border-radius: 5px;
						background: #fff;

						.search-input {

							width: calc(100% - 110px);
							height: 42px;
							padding: 0 10px;
							line-height: 40px;
						}

						.search-btn {
							border-left: 1px solid $border-color;
							position: absolute;
							@extend %flex-align-center;
							border-radius: 5px;
							right: 2px;
							width: 90px;
							top: 3px;
							height: 36px;
							justify-content: center;
							line-height: 40px;
							color: #fff;
							margin-left: -1px;
							cursor: pointer;
							transition: all .2s;
							background-color: $color-primary !important;
						}
					}

				}

				.keyword-list {
					z-index: 6;
					position: absolute;
					left: 0;
					top: 39px;
					width: 100%;
					border: 2px solid $color-primary;
					border-top: none;
					background-color: #fff;
					border-radius: 0 0 5px 5px;
					transition: all .2s;

					.item {
						font-size: 13px;
						padding: 10px;
						cursor: pointer;

						&:hover {
							background-color: #fafafa;
						}

						&.active {
							background-color: #fafafa;
						}
					}
				}
			}
		}

		.goods-panel {
			background-color: #000;
			z-index: 5;
			position: absolute;
			top: 100%;
			left: 0;
			right: 0;
			height: 0;
			overflow: hidden;
			transition: box-shadow .2s, height .3s ease-in;

			&.active {
				height: 229px;
				border-top: 1px solid $border-color;
				box-shadow: 0 3px 4px rgba(0, 0, 0, .18);
			}

			.goods-container {
				max-width: $page-width;
				min-width: $page-minwidth;
				margin: 0 8vw;
				@extend %flex-align-center;

				.goods {
					text-align: center;
					cursor: pointer;
					font-size: 12px;
					padding: 35px 12px 25px;

					&:first-child {
						margin-left: 50px;
					}

					.thumb {
						width: 160px;
						height: 110px;
						margin-bottom: 15px;
					}

					.name {
						color: #333;
						line-height: 20px;
						max-width: 200px;
					}

					.price {
						color: $color-primary;
						line-height: 20px;
					}
				}

				.separator {
					height: 100px;
					border-right: 1px solid $border-color;
					margin-top: -50px;
				}
			}
		}
	}
</style>